<template>
  <div class="box">
    <!-- 右上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="传感器超量程监测"
      style="height: 260px"
    >
      <!-- 传感器超量程监测 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="sensorSum">
          <p class="sum">传感器数量</p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{outrangeNum}}</span
            ><span class="piece">次</span>
          </p>
        </div>
        <div class="charttitle">近24小时超量程使用趋势</div>
        <div class="outage">
          <LineChart
            :chartData="outrangeLists"
            :text="['超量程']"
            :area="true"
            unit="次数"
            :color="['#FED001']"
          />
        </div>
      </div>
    </HerinContainer>
    <!-- 右中box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="传感器调校监测"
      style="height: 260px"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, ind) in titleTwotab"
          :key="ind"
          :class="['btn', isTwobtn === item ? 'isbtn' : '']"
          @click="clickTwoTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 传感器调校监测 统计 -->
      <div :slot="Twocount" class="MainCoal-box-content">
        <div class="sensorSum">
          <p class="sum">调校总数</p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{ tuningInfoNum }}</span
            ><span class="piece">次</span>
          </p>
        </div>
        <div class="charttitle">近24小时调校趋势</div>
        <div class="outage">
          <LineChart
            :chartData="tuningInfoList"
            :text="['调校']"
            :area="true"
            unit="次"
            :color="['#33C6FD']"
          />
        </div>
      </div>
      <!-- 传感器调校监测  列表 -->
      <div :slot="Twolist" class="MainCoal-box-content">
        <div class="input-box">
          <input v-model="tuneInput" type="text" placeholder="搜索..." />
          <i
            v-show="tuneInput"
            class="el-icon el-icon-close"
            @click="tuneIconoutageFun"
          />
          <i class="el-icon el-icon-search" @click="tuneSearch" />
        </div>
        <div class="center-select"></div>
        <div style="height: 8.5rem; overflow: auto; padding-right: 10px">
          <template v-if="tuningList.length > 0">
            <div class="outageList">
              <div class="tune" v-for="(v, tuneList) in tuningList" :key="tuneList">
                <div class="cont">
                  <p class="title">{{ v.stationNo }}</p>
                </div>
                <div class="state">
                  <div class="stateImg">
                    <img src="@/assets/img/monitor/icon-6.png" alt="" />
                    <span class="overflow-ellipsis">{{v.stationLocation}}</span>
                  </div>
                  <span>{{ v.createTime }}</span>
                </div>
              </div>
            </div>
          </template>
          <div v-else class="isCommonLists">暂无数据</div>
        </div>
      </div>
    </HerinContainer>
    <!-- 右下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="传感器告警信息"
      style="height: 440px"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, i) in titletab"
          :key="i"
          :class="['btn', isbtn === item ? 'isbtn' : '']"
          @click="clickTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 传感器告警信息 告警分析 -->
      <div :slot="count" class="MainCoal-box-content" style="height: 416px">
        <div class="broken">
          <div>
            <span class="title">今日告警</span>
            <span><span class="num">{{todayWaringNum}}</span><span class="piece">次</span></span>
          </div>
          <div>
            <span class="title">近30天告警</span>
            <span><span class="num">{{ thirtyTodayWaringNum }}</span><span class="piece">次</span></span>
          </div>
        </div>
        <div class="charttitle">今日告警分析</div>
        <div class="sensorSort">
          <div class="chat">
            <PieChart
              :data="todayWaringAnalyse"
              :color="todayColor"
              text="传感器分类"
              :src="require('@/assets/img/monitor/icon-2.png')"
            />
          </div>
          <div class="right">
            <div class="item-right" v-for="(item,index) in todayWaringAnalyse" :key="index">
              <span class="point" :style="{'backgroundColor':statusColor(item.s).color}"></span>
              <span class="cam">{{item.s}}</span>
              <span class="name">{{item.y}}</span>
              <span class="cam">次</span>
            </div>
          </div>
        </div>
        <div class="charttitle">近30天告警趋势统计分析</div>
        <div style="height: 157px">
          <LineChart
            :chartData="thirtyTodayWaringAnalyse"
            :text="['告警']"
            :area="true"
            unit="次"
            :color="['#00EBEF']"
          />
        </div>
      </div>
      <!-- 传感器告警信息  告警记录列表 -->
      <div :slot="list" class="MainCoal-box-content" style="height: 416px">
        <div class="input-box">
          <input v-model="alertInput" type="text" placeholder="搜索..." />
          <i
            v-show="alertInput"
            class="el-icon el-icon-close"
            @click="alertIconoutageFun"
          />
          <i class="el-icon el-icon-search" @click="alertSearch" />
        </div>
        <div class="search-wrap">
          <HerinSelect
            v-model="area"
            class="herin-select"
            :options="areaAll"
            place-holder=""
            :height="28"
            :width="160"
            :showOptionscount="4"
            @HerinSelectChange="areaFun"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
          <HerinSelect
            v-model="type"
            class="herin-select"
            :options="typeAll"
            place-holder=""
            :height="28"
            :width="160"
            style="background-color: rgba(255, 255, 255, 0.05)"
            @HerinSelectChange="areaFun"
          />
        </div>
        <div class="center-select"></div>
        <div
          class="alertList"
          style="height: 275px; overflow: auto; padding-right: 10px"
        >
          <template v-if="alarmRecord.length > 0">
            <div
              class="alert"
              v-for="(v, alertList) in alarmRecord"
              :key="alertList"
            >
              <div class="cont">
                <p class="title">{{ v.stationNo }}</p>
                <p>
                  <span class="except-type" :style="{'backgroundColor':statusColor(v.exceptType).bgcolor, color:statusColor(v.exceptType).color}">{{ v.exceptType }}</span>
                </p>
              </div>
              <div class="state">
                <div class="stateImg">
                    <img src="@/assets/img/monitor/icon-6.png" alt="" />
                    <span class="overflow-ellipsis">{{v.stationLocation}}</span>
                  </div>
                <span>{{ v.createTime }}</span>
              </div>
            </div>
          </template>
          <div v-else class="isCommonLists">暂无数据</div>
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import PieChart from '@/components/chart/pie/PieChart.vue';
import LineChart from '@/components/chart/line/LineChart.vue';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';

import { getOutrange, getAllArea, getAllSensorType, queryTuning, queryWarning } from '@/api/item/monitor/safety';
import { xFormat } from '@/utils/date';

export default {
  components: {
    PieChart,
    HerinSelect,
    HerinContainer,
    LineChart
  },
  data() {
    return {
      alertList: [
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false, // 断电
          brokenX: true, // 断线
          normal: false // 超量程
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: true
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: false,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: false
        },
        {
          title: '矿压传感器-VGQ0219',
          time: '2022-09-01 12:21:09',
          show: '40204工作面',
          brokenD: true,
          brokenX: true,
          normal: false
        }
      ],
      tuneList: [
        {
          title: '矿压传感器0ADASD',
          show: '41110总裁面',
          time: '2022-02-12 07:12:10'
        },
        {
          title: '矿压传感器0ADASD',
          show: '41110总裁面',
          time: '2022-02-12 07:12:10'
        },
        {
          title: '矿压传感器0ADASD',
          show: '41110总裁面',
          time: '2022-02-12 07:12:10'
        },
        {
          title: '矿压传感器0ADASD',
          show: '41110总裁面',
          time: '2022-02-12 07:12:10'
        },
        {
          title: '矿压传感器0ADASD',
          show: '41110总裁面',
          time: '2022-02-12 07:12:10'
        },
        {
          title: '矿压传感器0ADASD',
          show: '41110总裁面',
          time: '2022-02-12 07:12:10'
        },
        {
          title: '矿压传感器0ADASD',
          show: '41110总裁面',
          time: '2022-02-12 07:12:10'
        }
      ],
      chartData: [
        { x: '00:00', y: 5, s: '调校' },
        { x: '06:00', y: 6, s: '调校' },
        { x: '12:00', y: 4, s: '调校' },
        { x: '18:00', y: 3, s: '调校' },
        { x: '24:00', y: 4, s: '调校' }
      ],
      chart: [
        { x: '07-01', y: 1, s: '告警' },
        { x: '07-05', y: 0, s: '告警' },
        { x: '07-10', y: 4, s: '告警' },
        { x: '07-15', y: 1, s: '告警' },
        { x: '07-20', y: 0, s: '告警' },
        { x: '07-25', y: 0, s: '告警' },
        { x: '07-30', y: 3, s: '告警' }
      ],
      color: ['#34C8FF', '#2AD49A', '#00FDFF'],
      count: 'content',
      list: '',
      titletab: ['告警分析', '告警记录'],
      isbtn: '告警分析',
      Twocount: 'content',
      Twolist: '',
      titleTwotab: ['统计', '记录'],
      isTwobtn: '统计',
      tuneInput: '',
      alertInput: '',
      area: '全部传感器',
      areaAll: [
        {
          label: '全部传感器',
          value: '全部传感器'
        }
      ],
      type: '全部类型',
      typeAll: [
        {
          label: '全部类型',
          value: '全部类型'
        }
      ],
      outrangeNum: 0,
      outrangeLists: [],
      tuningList: [],
      tuningInfo: {},
      thirtyTodayWaringAnalyse: [],
      thirtyTodayWaringNum: 0,
      todayWaringAnalyse: [],
      todayWaringNum: 0,
      todayColor: ['#34C8FF', '#2AD49A', '#2AD49A', '#00FDFF', '#2AD49A', '#00FDFF', '#00FDFF', '#00FDFF', '#34C8FF', '#00FDFF'],
      alarmRecord: []
    };
  },
  computed: {
    tuningInfoNum() {
      return this.tuningInfo?.outrangeNum;
    },
    tuningInfoList() {
      if (this.tuningInfo?.allList && this.tuningInfo?.allList.length > 0) {
        return this.tuningInfo?.allList.map(item => {
          return {
            x: xFormat(item.dataTime),
            y: item.faultNum * 1,
            s: item.faultName
          };
        });
      } else {
        return [];
      }
    },
    statusColor() {
      return function(status) {
        const info = {};
        switch (status) {
          case '标校':
            info.color = '#00FDFF';
            info.bgcolor = 'rgba(0,253,255,0.3)';
            break;
          case '超量程':
            info.color = '#FFD101';
            info.bgcolor = 'rgba(255,209,1,0.3)';
            break;
          case '断电报警':
            info.color = '#FB9B2A';
            info.bgcolor = 'rgba(251,155,42,0.3)';
            break;
          case '基站不通':
            info.color = '#34C8FF';
            info.bgcolor = 'rgba(52,200,255,0.3)';
            break;
          case '超限报警':
            info.color = '#864BFF';
            info.bgcolor = 'rgba(134,75,255,0.3)';
            break;
          case '超下限预警':
            info.color = '#6FFACB';
            info.bgcolor = 'rgba(111,250,203,0.3)';
            break;
          case '馈电异常':
            info.color = '#FEFA83';
            info.bgcolor = 'rgba(254,250,131,0.3)';
            break;
          case '基站断电':
            info.color = '#B2F98C';
            info.bgcolor = 'rgba(178,249,140,0.3)';
            break;
          case '超上限预警':
            info.color = '#5087EC';
            info.bgcolor = 'rgba(80,135,236,0.3)';
            break;
          case '传感器断线':
            info.color = '#EF303B';
            info.bgcolor = 'rgba(239,48,59,0.3)';
            break;
        }
        return info;
      };
    }
  },
  mounted() {
    this.getAllArea();
    this.getAllSensorType();
    this.startActionLoop3S(this.all3Sfun);
    this.startActionLoop1H(this.all1HFun);
  },
  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
    this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
    this.actionLoopTimer1H = null;
  },
  methods: {
    all3Sfun() {
      this.queryWarning();
      if (this.isTwobtn === '记录') {
        this.queryTuning();
      }
    },
    all1HFun() {
      this.queryTuning();
      this.getOutrange();
    },
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 每隔 1小时 循环查询
    startActionLoop1H(callback) {
      callback();
      // 3600000
      this.actionLoopTimer1H = setInterval(callback, 10000);
    },
    // 获取传感器告警列表数据
    async queryWarning() {
      const params = {
        areaName: this.isbtn === '告警分析' ? '' : this.area === '全部传感器' ? '' : this.area,
        keyWard: this.alertInput,
        paramType: this.isbtn === '告警分析' ? 'Statistics' : 'List',
        sensorWarningType: this.type === '全部类型' ? '' : this.type
      };
      const res = await queryWarning(params);
      if (res.data.code === 200) {
        const resInfo = res.data.data;
        if (resInfo.thirtyTodayWaringAnalyse) {
          this.thirtyTodayWaringAnalyse = resInfo.thirtyTodayWaringAnalyse.map(item => {
            return {
              x: item.createTime,
              y: item.waringNum * 1,
              s: item.waringType
            };
          });
        }
        this.thirtyTodayWaringNum = resInfo.thirtyTodayWaringNum;
        if (resInfo.todayWaringAnalyse) {
          this.todayWaringAnalyse = resInfo.todayWaringAnalyse.map(item => {
            return {
              x: item.waringType,
              y: item.waringNum * 1,
              s: item.waringType
            };
          });
        }
        this.todayWaringNum = resInfo.todayWaringNum;
        if (resInfo.alarmRecord !== null) {
          this.alarmRecord = resInfo.alarmRecord;
        }
      }
    },
    // 获取传感器的所有全部类型
    async getAllSensorType() {
      const res = await getAllSensorType();
      if (res.data.code === 200) {
        const data = res.data.data.map(item => {
          return {
            label: item.type,
            value: item.code
          };
        });
        this.typeAll = [...this.typeAll, ...data];
      }
    },
    // 获取全部传感器
    async getAllArea() {
      const res = await getAllArea();
      if (res.data.code === 200) {
        const data = res.data.data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.areaAll = [...this.areaAll, ...data];
      }
    },
    // 点击传感器告警全部区域
    areaFun() {
      this.alertInput = '';
      this.queryWarning();
    },
    // 点击传感器告警搜索按钮
    alertSearch() {
      this.queryWarning();
    },
    // 点击传感器告警清除搜索框
    alertIconoutageFun() {
      this.alertInput = '';
      this.queryWarning();
    },
    // 传感器调校监测
    async queryTuning() {
      const params = {
        areaName: '',
        keyWard: this.tuneInput,
        paramType: this.isTwobtn === '统计' ? 'Statistics' : 'List',
        sensorWarningType: ''
      };
      const res = await queryTuning(params);
      if (res.data.code === 200) {
        this.tuningInfo = res.data.data.tuningInfo;
        if (res.data.data.tuningList !== null) {
          this.tuningList = res.data.data.tuningList;
        }
      }
    },
    // 点击调校搜索按钮
    tuneSearch() {
      this.queryTuning();
    },
    // 点击调校清除搜索框
    tuneIconoutageFun() {
      this.tuneInput = '';
      this.queryTuning();
    },
    // 点击传感器调校监测tab  右中
    clickTwoTitleTab(item) {
      this.isTwobtn = item;
      if (item === '记录') {
        this.Twolist = 'content';
        this.Twocount = '';
      } else if (item === '统计') {
        this.Twolist = '';
        this.Twocount = 'content';
      }
      this.queryTuning();
    },
    // 点击传感器告警信息tab  右下
    clickTitleTab(item) {
      this.isbtn = item;
      if (item === '告警记录') {
        this.list = 'content';
        this.count = '';
      } else if (item === '告警分析') {
        this.list = '';
        this.count = 'content';
      }
      this.queryWarning();
    },

    // 传感器超量程监测
    async getOutrange() {
      const res = await getOutrange();
      if (res.data.code === 200) {
        this.outrangeNum = res.data.data.outrangeNum;
        this.outrangeLists = res.data.data.allList.map(item => {
          return {
            x: xFormat(item.dataTime),
            y: item.faultNum * 1,
            s: item.faultName
          };
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
    display: inline;
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 0 0.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .charttitle {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: 0.625rem 0;
  }
  .center-select {
    color: rgba(173, 173, 173, 100);
    font-size: 12px;
    margin: 0.625rem 0;
    span {
      color: #00fdff;
      margin: 0 0.3125rem;
    }
  }
  .input-box {
    width: 100%;
    height: 1.75rem;
    border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.05);
    position: relative;
    text-align: left;
    box-sizing: border-box;
    input {
      width: 72%;
      height: 100%;
      margin: 0 0.625rem;
      border: none;
      font-size: 0.75rem;
      color: rgba($color: $white, $alpha: 0.9);
      background-color: transparent;
      outline-width: 0rem;
    }
    input::-webkit-input-placeholder {
      font-size: 0.75rem;
      color: $secondaryTextColor;
    }
    .el-icon {
      display: inline-block;
      width: 0.875rem;
      height: 0.875rem;
      line-height: 0.875rem;
      font-size: 0.75rem;
      cursor: pointer;
      color: rgba($color: $white, $alpha: 0.5);
      position: absolute;
      top: 0.4375rem;
      &-close {
        right: 1.375rem;
      }
      &-search {
        right: 0.25rem;
        font-size: 0.75rem;
      }
    }
  }
  .outageList {
    // width: calc(100% + 10px);
    .tune:last-child {
      margin-bottom: 0;
    }
    .tune {
      border-bottom: 0.0625rem solid rgba(173, 173, 173, 100);
      margin-bottom: 0.625rem;
      .cont {
        justify-content: space-between;
        display: flex;
        p {
          align-items: center;
          display: flex;
        }
        .title {
          color: rgba(216, 216, 216, 100);
          font-size: 12px;
        }
      }
      .state {
        display: flex;
        justify-content: space-between;
        margin: 0.625rem 0;
        font-size: 12px;
        color: rgba(173, 173, 173, 100);
        .stateImg {
          display: flex;
          align-items: center;
        }
        img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: .3125rem;
        }
      }
    }
  }
  .broken {
    height: 2.375rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .sensorSort {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    .chat {
      width: 7.6875rem;
      height: 7.4375rem;
    }
    .right {
      flex:1;
      height: 7.4375rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .item-right{
        width: auto;
        .point {
          display: inline-block;
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 50%;
        }
        .cam {
          color: rgba(173, 173, 173, 100);
          font-size: 12px;
          display: inline-block;
          margin-left: .1875rem;
        }
        .name{
          color: rgba(248, 248, 248, 100);
          font-size: 14px;
          margin-left: .125rem;
        }
      }
    }
  }
  .outage {
    height: 126px;
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 0.625rem;
  }
  .alertList {
    .alert:last-child {
      margin-bottom: 0;
    }
    .alert {
      border-bottom: 0.0625rem solid rgba(173, 173, 173, 100);
      margin-bottom: 0.625rem;
      .cont {
        justify-content: space-between;
        display: flex;
        p {
          align-items: center;
          display: flex;
        }
        .title {
          color: rgba(216, 216, 216, 100);
          font-size: 12px;
        }
        .except-type {
          font-size: 12px;
          display: inline-block;
          line-height: 16px;
          padding: 0 5px;
          text-align: center;
        }
      }
      .state {
        display: flex;
        justify-content: space-between;
        margin: 0.625rem 0;
        font-size: 12px;
        color: rgba(173, 173, 173, 100);
        .stateImg {
          display: flex;
          align-items: center;
        }
        img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: .3125rem;
        }
      }
    }
  }
}
</style>
